<template>
  <div>
    <el-form inline class="demo-form-inline">
      <el-form-item label="产品">
        <el-input v-model="form.product"></el-input>
      </el-form-item>
      <el-form-item label="问题">
        <el-input v-model="form.question"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </el-form-item>
    </el-form>

    <div v-for="(item, index) in listData" :key="index" class="list-item">
      <p class="itemname"><strong>问题：</strong>{{ item.problem }}</p>
      <div class="image-list">
        <el-image
          :preview-src-list="item.questionUrlList"
          v-for="url in item.questionUrlList"
          :key="url"
          :src="url"
          fit="cover"
          class="image-item"
        ></el-image>
      </div>
      <p class="itemname"><strong>答案：</strong>{{ item.answer }}</p>
      <div class="image-list">
        <el-image
          :preview-src-list="item.answerUrlList"
          v-for="url in item.answerUrlList"
          :key="url"
          :src="url"
          fit="cover"
          class="image-item"
        ></el-image>
      </div>
    </div>

    <el-pagination
      @current-change="handlePageChange"
      :current-page="current"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import myaxios from "../config/myaxios";

export default {
  name: "SearchPage",
  data() {
    return {
      form: {
        product: '',
        question: ''
      },
      listData: [

      ],
      total: 0,
      // answer:""

      current: 1,
      pageSize: 10
    }
  },
  created() {
    this.getQuestion()
  },

  methods: {
    getQuestion() {
      let urlSearchParams = new URLSearchParams();
      urlSearchParams.append("current", this.current)
      urlSearchParams.append("pageSize", this.pageSize)
      if (this.form.product != null && this.form.product !== "") {
        urlSearchParams.append("productname", this.form.product)
      }

      if (this.form.question != null && this.form.question !== "") {
        urlSearchParams.append("problem", this.form.question)
      }
      myaxios.get("question", {
        params: urlSearchParams
      }).then(res => {
        if (res.data.code === 0) {
          this.listData = res.data.data.records
          this.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        this.$message.error("系统繁忙，请重试")
      })
    },
    onSubmit() {
     this.getQuestion()
      // 在这里处理你的表单提交
    },
    handlePageChange(newPage) {
      this.current = newPage;
      this.getQuestion();
    }
  }

}
</script>

<style scoped>

.list-item {
  margin-bottom: 20px;
  border-bottom: 1px silver solid;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.image-item {
  width: 10%; /* 3 images per row, 10px gap */
  /*height: 200px; !* adjust as needed *!*/
  margin-bottom: 10px;
  margin-left: 15px;
  margin-top: 10px;
}

.itemname {
  padding-top: 5px;
  padding-bottom: 5px;
}

</style>
